The Mobile Checkout Experience結賬體驗

在電子商務中，結賬流程是使用者旅程中至關重要的一環，它直接影響品牌形象、使用者回訪率和收入增長。隨著智慧手機購物的普及，設計最佳化的移動端結賬流程不僅要遵循電商使用者體驗的最佳實踐，還需充分利用移動裝置的優勢，並克服其侷限性。以下是根據研究總結出的設計指南。

1. 購物車與結賬選項

快速訪問購物車:

確保點選購物車圖示後，使用者能直接進入購物車頁面，避免額外的點選或彈窗步驟。

良好實踐: JCrew.com 的設計允許使用者一鍵進入購物車頁面。

差的設計: PSSW 要求使用者點選多次才能訪問完整的購物車。

在 PSSW 上，點選購物車圖示會顯示一個移動迷你購物車。然後，使用者必須點選“檢視購物車”或“結賬”才能訪問其完整的購物車和訂單詳細資訊。這一額外的點選是不必要的；當使用者點選購物車圖示時，應直接將他們帶到其購物車頁面。

輕鬆更新購物車內容:

提供明確的“移除”按鈕，避免透過更改數量為0來刪除商品。

示例: HP 的購物車設計讓使用者感到困惑，因為沒有直觀的“移除”選項。

惠普（HP）未在購物車中每件商品旁設定明確的“移除”按鈕，而是要求使用者將商品數量改為零來從購物車中移除商品。這種設計不直觀，令人感到沮喪。

避免“更新”按鈕:

購物車變更應自動生效，而不是要求使用者額外點選“更新”。

示例: ThingsRemembered.com 要求使用者點選“更新”才能儲存數量更改，增加了操作負擔。

ThingsRemembered.com：使用者必須點選步進器，然後點選“更新”連結才能更改商品的數量。這種設計並非最佳方案。

支援跨裝置購物體驗:

實現購物車內容的同步，讓使用者在移動裝置和桌面端無縫切換。

Apple 的 Handoff 功能允許使用者在不同裝置間延續會話。

交接功能允許蘋果使用者在 iPhone、iPad 和 Mac 裝置之間切換。此功能支援無縫購物體驗，允許在不同裝置上延續相同的會話。在這種情況下，使用者在 MacBook Pro 電腦上開始購物，但轉移到 iPhone 上進行結賬

CrateandBarrel.com 提醒使用者登入後可在所有裝置上訪問購物車內容。

CrateandBarrel.com 在空購物車頁面上顯示了一條訊息，告知使用者透過登入，他們可以在所有裝置上訪問自己的購物車。

突出訪客結賬選項:

將訪客結賬設定為最顯眼的選項，優先於登入或建立賬戶。

示例: Pottery Barn 在移動端優先展示訪客結賬選項，方便使用者快速完成購買。

Pottery Barn（家居品牌）很好地將訪客結賬功能顯著地呈現在視口內，使使用者無需浪費時間四處尋找。訪客結賬的優先順序高於認證結賬，這使得忙碌的移動購物者能夠快速完成結賬流程。

2. 訂單摘要與提貨選項

確保訂單摘要易於發現:

將訂單摘要放在頁面頂部，並展開顯示，避免使用者錯過重要的費用資訊。

良好實踐: Jet.com 在頁面頂部顯示詳細的訂單摘要。

阿迪達斯官網：訂單總結在頁面上的位置過低，不易檢視。使用者必須滾動到“檢視與支付”頁面的最底部，就在移動版頁尾的上方，才能看到他們的最終訂單總結資訊。該資訊還以摺疊式面板的形式呈現，這使得價格構成難以看清；相反，它應該放置在頁面的較高位置，並展開以顯示構成訂單總價的每個明細專案。

差的設計: Adidas.com 的訂單摘要位於頁面底部並被摺疊，難以檢視。

在Jet.com的“檢視並支付”頁面上，訂單摘要顯著地放置在頁面摺疊線以上。使用者在下單前可以清楚地看到每一個訂單項，而無需向下滾動。

利用使用者位置:

根據使用者的當前位置預估稅費和運費，並提供附近門店的提貨選項。

示例: Target 的移動端結賬流程使用位置檢測提供門店提貨和稅費預估功能。

塔吉特（Target）的移動結賬流程使用位置檢測來提供店內取貨選項，並在訂單摘要中估算稅款。

3. 表單欄位與輸入互動

為每個欄位提供合適的鍵盤型別:

數字欄位使用數字鍵盤，電子郵件欄位使用帶“@”和“.”的鍵盤。

示例: Nike.com 在電子郵件和電話號碼欄位提供最佳化鍵盤。

Nike.com 展示了電子郵件（左）和電話號碼（右）欄位的正確鍵盤。

自動填充欄位:

根據使用者輸入的郵編或信用卡號自動填充地址、城市或卡型別，減少使用者輸入。

示例: Crutchfield 根據郵編自動填充城市和州，並允許使用者修改。

Crutchfield 讓使用者能夠輕鬆輸入他們的地址。該網站提示使用者首先輸入他們的郵政編碼（左側），並使用此資訊在可編輯的表單欄位中完成城市和州（右側）。如果使用者所在的城市名稱與資料庫中顯示的不同，他們可以更改這些欄位。
在 Staples.com 上的使用者必須滾動瀏覽一個長長的下拉選單，以選擇代表他們所在州的兩個字母。對於使用者來說，輸入字母要比從下拉選單中滾動選擇一個州快得多。

相容瀏覽器自動填充功能:

確保表單欄位支援瀏覽器自動填充功能，如名字、地址和信用卡資訊。

使用開放欄位代替下拉選單:

對於州名和信用卡過期日期等欄位，開放輸入比滾動長下拉選單更快捷。

示例: TM Lewin 使用文字輸入欄位而非下拉選單填寫信用卡過期日期，並切換到數字鍵盤以方便輸入。

TM Lewin 正確地使用了文字輸入欄位來填寫信用卡有效期，而非繁瑣的下拉選單。它還在移動端將鍵盤切換為數字小鍵盤，以使輸入此資訊變得容易

4. 移動端便捷支付

提供移動友好的支付選項:

支援 PayPal、Apple Pay 等第三方支付選項，但避免選項過多以免造成選擇困難。確保最常用的支付方式最顯眼，或列在首位。

示例: Vineyard Vines 在購物車和支付頁面均提供 PayPal 選項，防止使用者錯過。

Vineyard Vines 在購物車（左側）中提供了許多對移動端友好的支付選項，並且在支付頁面（右側）再次為那些可能在購物車中錯過的人展示了 PayPal 支付方式。

支援拍照識別信用卡:提供功能讓使用者透過拍照輸入信用卡資訊，減少手動輸入錯誤。

示例: Tiffany.com 支援 Safari 的信用卡自動填充功能，使用者可透過拍攝信用卡直接輸入支付資訊。

（Tiffanys.com）：Safari 瀏覽器中的自動填充信用卡功能（左）允許使用者拍攝他們的信用卡以填寫其支付資訊（右）。

卓越的移動端結賬體驗在於關注細節，透過最佳化表單設計、支援快捷支付和跨裝置同步等方式，幫助使用者快速完成購買。雖然這些設計細節常被忽略，但它們能夠顯著提升使用者滿意度和轉化率，為使用者打造便捷且愉快的購物體驗。